<template>
  <Form label-position="left" :label-width="120" ref="formValidate" :rules="ruleValidate" :model="formValidate">
    <FormItem label="消息模板名称" prop="templateName">
      <i-input type="text" v-model="formValidate.templateName" placeholder="消息模板名称">
      </i-input>
    </FormItem>
    <FormItem label="模板key" prop="templateCode">
      <i-input type="text" v-model="formValidate.templateCode" placeholder="模板key,唯一">
      </i-input>
    </FormItem>
    <FormItem label="消息模板内容" prop="templateContent">
      <i-input type="textarea" v-model="formValidate.templateContent" placeholder="消息模板内容">
      </i-input>
    </FormItem>
    <FormItem label="模板说明" prop="intro">
      <i-input type="textarea" v-model="formValidate.templateIntro" placeholder="模板说明">
      </i-input>
    </FormItem>
    <FormItem label="发送开关">
      <i-switch size="large" v-model="sendSwitch" true-value="1" false-value="0">
        <span slot="open">开启</span>
        <span slot="close">关闭</span>
      </i-switch>
    </FormItem>
    <FormItem label="模板类型">
      <CheckboxGroup v-model="selectedTemplateType">
        <Checkbox :label="item.value" :key="item.value" v-for="(item) in templateType">
          <Icon :type="item.icon" />
          <span>{{item.label}}</span>
        </Checkbox>
      </CheckboxGroup>
    </FormItem>
    <FormItem label="备注" prop="memo">
      <i-input type="textarea" v-model="formValidate.memo" placeholder="备注">
      </i-input>
    </FormItem>
    <FormItem>
      <Button type="primary" @click="handleSubmit('formValidate')">确定
      </Button>
      <Button @click="publicReset('formValidate')" style="margin-left: 8px">取消</Button>
    </FormItem>
  </Form>
</template>

<script>
import API_KEY from '../../../api/index'
import {
  updateMixin
} from '../../../mixin'
import {
  createMsg,
  getById,
  updateMsg
} from '../../../api/modules/system/msgTemplate'
import message from '../../../utils/message'
export default {
  name: 'MessageManageUpdate',
  mixins: [updateMixin],
  props: {
    type: {
      type: Number,
      default: 1
    },
    moduleId: {
      type: [String, Number],
      default: ''
    }
  },
  data () {
    return {
      // 表单数据
      formValidate: {
        templateName: '',
        templateCode: '',
        templateIntro: '',
        templateType: '',
        memo: '',
        sendSwitch: '0',
        templateContent: ''
      },
      selectedTemplateType: [],
      sendSwitch: '0',
      // 表单校验规则
      ruleValidate: {
        templateName: [{
          required: true,
          message: '当前项不能为空',
          trigger: 'blur'
        }],
        templateContent: [{
          required: true,
          message: '当前项不能为空',
          trigger: 'blur'
        }],
        templateCode: [{
          required: true,
          message: '当前项不能为空',
          trigger: 'blur'
        }]
      },
      templateType: [{
        label: '短信',
        icon: 'md-text',
        value: '1'
      }, {
        label: '钉钉',
        icon: 'logo-whatsapp',
        value: '2'
      }, {
        label: '微信公众号',
        icon: 'ios-disc-outline',
        value: '3'
      }, {
        label: '微信小程序',
        icon: 'ios-infinite',
        value: '4'
      }, {
        label: '邮件',
        icon: 'ios-mail',
        value: '5'
      }, {
        label: 'web推送',
        icon: 'md-globe',
        value: '6'
      }, {
        label: '安卓app',
        icon: 'logo-android',
        value: '7'
      }, {
        label: '苹果app推送',
        icon: 'logo-apple',
        value: '8'
      }],
      // 请求地址
      action: {
        readDataById: API_KEY.message.curdMessage,
        // 新增数据
        createData: API_KEY.message.curdMessage,
        // 更新数据
        updateData: API_KEY.message.curdMessage
      }
    }
  },
  mounted () {
    if (this.type === 2) {
      this.init()
    }
  },
  methods: {
    init () {
      this.formValidate.id = this.moduleId
      this.formValidate.version = null
      // 请求接口
      getById(this.moduleId).then(({
        data
      }) => {
        this.formValidate = data
        if (this.formValidate.templateType != null) {
          this.selectedTemplateType = this.formValidate.templateType.split(',')
        }
        if (this.formValidate.sendSwitch != null) {
          this.sendSwitch = this.formValidate.sendSwitch + ''
        }
      })
    },
    /**
       * 数据提交函数
       * @param name
       */
    handleSubmit (name) {
      this.$refs[name].validate((valid) => {
        // 校验通过
        if (valid) {
          this.formValidate.templateType = this.selectedTemplateType.join(',')
          this.formValidate.sendSwitch = this.sendSwitch
          // 判断用户是新增操作还是编辑操作type为1表示新增，2为编辑
          if (this.type === 1) {
            createMsg(this.formValidate).then(data => {
              message.message.success(data.message)
              // 关闭对话框并重新请求数据
              this.$emit('closeView', 1)
            })
          } else if (this.type === 2) {
            updateMsg(this.formValidate).then(data => {
              message.message.success(data.message)
              // 关闭对话框并重新请求数据
              this.$emit('closeView', 1)
            })
          }
        } else {
          message.message.error('数据格式错误，请检查后重试')
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
